.<template>
  <div
    ref="closepopoverRef"
    style="padding: 10px 30px;"
  >
    <el-table :data="tableData">
      <el-table-column
        prop="prodName"
        label="商品名称"
        show-overflow-tooltip
        min-width="150"
      >
        <template #default="scope">
          <el-tooltip
            v-if="getTip(scope.row)"
            effect="dark"
            :content="getTip(scope.row)"
            placement="bottom-start"
          >
            <el-icon style="color: red">
              <Warning />
            </el-icon>
          </el-tooltip>
          {{ scope.row.prodName }}
        </template>
      </el-table-column>

      <el-table-column
        prop="skuCode"
        label="型号"
        min-width="150"
      >
        <template #default="scope">
          <el-button
            type="text"
            @click="goToPrice(scope.row)"
          >
            {{ scope.row.skuCode }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column
        prop="tradeTerm"
        label="交期"
        :width="100"
      >
        <template #default="scope">
          {{ scope.row.tradeTerm === 0 ? '现货' : scope.row.tradeTerm ? `${scope.row.tradeTerm}日发货` : (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
        </template>
      </el-table-column>

      <el-table-column
        prop="stocks"
        label="库存"
        min-width="100"
      >
        <template #default="scope">
          {{ scope.row.stocks === 0 ? 0 : scope.row.stocks || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
        </template>
      </el-table-column>

      <el-table-column
        prop="number"
        label="数量"
        :width="100"
      >
        <template #default="scope">
          {{ scope.row.number || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
        </template>
      </el-table-column>

      <el-table-column
        prop="price"
        label="单价(￥/个)"
        :width="140"
      >
        <template #default="scope">
          <div style="display: flex; justify-content: space-between;">
            <span>
              {{ scope.row.price || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
              <el-tooltip
                v-if="scope.row.floorPrice && scope.row.price && (scope.row.floorPrice > scope.row.price)"
                :content="`该sku底价为${scope.row.floorPrice}元,当前报价低于底价`"
              >
                <el-icon
                  color="red"
                  size="18"
                >
                  <WarnTriangleFilled />
                </el-icon>
              </el-tooltip>
            </span>
            <el-popover
              placement="bottom"
              trigger="click"
              :width="175"
              @show="() => {
                onePrice = scope.row.price || ''
              }"
            >
              <div class="popover-box">
                <div>
                  <el-input-number
                    v-model="onePrice"
                    :min="0"
                    :max="1000000000"
                    @change="(currentValue, oldValue) => {
                    // scope.row.totalPrice = currentValue * (scope.row.number || 0)
                    }"
                  />
                </div>
                <div style="margin-top: 10px;">
                  <el-button
                    @click="closePopover()"
                  >
                    取消
                  </el-button>
                  <el-button
                    type="primary"
                    @click="handleChange(scope.row)"
                  >
                    保存
                  </el-button>
                </div>
              </div>
              <template #reference>
                <el-icon
                  v-if="isAuth('self:inquiry:quote') && status == 10"
                  color="#409efc"
                >
                  <EditPen />
                </el-icon>
              </template>
            </el-popover>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="totalPrice"
        label="总价(￥)"
        :width="100"
      >
        <template #default="scope">
          {{ scope.row.totalPrice || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
        </template>
      </el-table-column>

      <el-table-column
        prop="buyerRemark"
        label="客户备注"
        show-overflow-tooltip
        :width="150"
      >
        <template #default="scope">
          {{ scope.row.buyerRemark || '--' }}
        </template>
      </el-table-column>

      <el-table-column
        prop="sellerRemark"
        label="商家备注"
        show-overflow-tooltip
        :width="150"
      >
        <template #default="scope">
          {{ scope.row.sellerRemark || '--' }}
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        align="center"
        :label="$t('publics.operating')"
        width="120"
      >
        <template #default="scope">
          <div class="text-btn-con">
            <div
              class="default-btn text-btn"
              @click="onViewProd(scope.row)"
            >
              查看
            </div>
            <div
              class="default-btn text-btn"
              @click="onViewHistory(scope.row)"
            >
              报价历史
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <inq-history
      ref="inqHistoryRef"
      @go-to-detail="goToDetail"
    />
  </div>
</template>

<script setup>
import { ElMessage, ElLoading } from 'element-plus'
import { isAuth } from '@/utils'
import inqHistory from './inq-history.vue'

const emit = defineEmits(['refresh'])

const props = defineProps({
  subOrderNo: {
    type: String,
    default: ''
  },
  shopId: {
    type: String,
    default: ''
  },
  status: {
    type: String,
    default: ''
  }
})

const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 9999 // 每页显示多少条
})

const getTip = ({ invalidFlag, status, validStatus }) => {
  if (status == 7) {
    return '报价已过期'
  }
  if (status == 8) {
    return '该询价单已被取消'
  }
  if (validStatus != 0) {
    return '该商品已失效'
  }
  if (invalidFlag == 1) {
    return '该商品已被商家设为无效商品'
  }
  return ''
}

const tableData = ref([])
const getList = (pageParam, subOrderNo) => {
  const params = {
    subOrderNo,
    current: pageParam == null ? page.currentPage : pageParam.currentPage,
    size: pageParam == null ? page.pageSize : pageParam.pageSize
  }
  http({
    url: http.adornUrl('/shop/inquiryListItem/page'),
    method: 'get',
    params: http.adornParams(params)
  }).then(({ data }) => {
    tableData.value = (data.records || [])
    page.total = data.total
    // 末尾页数据为空重新请求
    if (!tableData.value.length && tableData.currentPage > 1) {
      page.currentPage = 1
      getList(page, subOrderNo)
    }
  })
}

const onViewProd = (row) => {
  const url = import.meta.env.VITE_APP_SHOP_ADDRESS
  window.open(`${url}detail?prodId=${row.prodId}`)
}

const router = useRouter()
const route = useRoute()
const goToPrice = (row) => {
  const { prodId, skuCode } = row
  // 检查是否自营
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(0, 0, 0, 0.7)'
  })
  http({
    url: http.adornUrl(`/prod/prod/info/${prodId}`),
    method: 'get',
    params: http.adornParams({})
  }).then(({ data }) => {
    if (data.selfProduct == 1) {
      router.push({
        path: '/self/price-manage/price',
        query: { prodId, shopId: props.shopId, skuCode }
      })
    } else {
      ElMessage.warning('非自营商品')
    }
  }).finally(() => {
    loading.close()
  })
}

const goToDetail = (row) => {
  const { page, search, status } = route.query
  router.push({
    path: '/self/inquiry/detail',
    query: { orderNo: row.orderNo, page, search, status }
  })
  nextTick(() => {
    emit('refresh', {
      orderNo: row.orderNo
    })
  })
}
const closepopoverRef = ref()
// 关闭popover弹窗
const closePopover = () => {
  closepopoverRef.value.click()
}

const onePrice = ref(0)
const handleChange = (row) => {
  http({
    url: http.adornUrl('/shop/inquiryListItem'),
    method: 'put',
    data: {
      price: onePrice.value,
      number: row.number,
      id: row.id
    }
  }).then(() => {
    ElMessage.success('操作成功')
    getList(page, row.subOrderNo)
    closePopover()
  })
}

const inqHistoryRef = ref(null)
const onViewHistory = (row) => {
  inqHistoryRef.value?.init(row)
}

onMounted(() => {
  getList(page, props.subOrderNo)
})

defineExpose({

})

</script>

<style lang="scss" scoped>

</style>
